<template>
  <div id="myTake">
    <header>
      <i @click="goBack()"></i>
      <div>专栏订阅</div>
    </header>
    <div class="border-8"></div>
    <ul class="list">
      <div class='mc' v-if="list.length<1">
        <p>暂无订阅!</p>
      </div>
      <Loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
        :autoFill="false">
        <li v-for="(item,index) in list" :key='index' v-if="list.length>0">
          <router-link :to="{name: 'columndetail',query: {id: item.id,name:'myTake'}}">
            <img :src="item.pic" width="75" height="90" />
            <div>
              <div>
                <h3>{{item.sname}}</h3>
              </div>
              <p>简介:{{item.content}}</p>
              <p>
                <i v-text="$utils.goodTime(item.time)"></i>
              </p>
            </div>
          </router-link>
        </li>
      </Loadmore>
    </ul>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        userid: '',
        sentPage: {
          page: 1,
          rows: 10
        },
        allLoaded: false,
        totalNum: 0, //总数据条数
      }
    },
    components: {
      Loadmore
    },
    methods: {
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      goBack() {
        this.$router.push({
          path: '/my'
        })
      },
      //获取订阅课程列表
      getCollectCourse(params) {
        this.userid = localStorage.getItem("loginMobile");
        // 第一个参数是root--baseurl
        this.$api.post(this.$api.baseURLSchool, "selecttype/attention/0?type=take&userid=" + this.userid, params, r => {
          // console.log(r);
          this.totalNum = r.data.records;
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
          if (r.data.ret == -3) {
            localStorage.clear();
            this.isLogin()
          }
          var that = this;
          this.list.forEach(function (item, index) {
            //根据cid获取课程详情
            that.$api.get(that.$api.baseURLSchool, "select_cid/special/" + item.id, {}, r => {
              // console.log(r);
              that.$set(that.list, index, r.data.info);
            }, err => {
              console.log(err);
            })
          });
        }, err => {
          console.log(err);
        })
      },
      //下拉刷新
      loadTop() {
        this.sentPage.page = 1;
        setTimeout(() => {
          this.getCollectCourse(this.sentPage);
          this.allLoaded = false;
        }, 20);
        this.$refs.loadmore.onTopLoaded();
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getCollectCourse(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }

    },
    computed: {},
    created() {
      this.getCollectCourse(this.sentPage);
    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
